<!--  -->
<template>
  <el-container>
    <div class="page-main-body-box">
      <div class="meedu-main-body">
        <div class="back-bar-box mb-30">
          <div class="btn-back" @click="gotoNixt">
            <i class="el-icon-back"></i>
            返回
          </div>
          <div class="line"></div>
          <div class="name">退款订单</div>
        </div>
        <div class="float-left j-b-flex mb-30">
          <div class="d-flex"></div>
          <div class="d-flex">
            <div>
              <el-select v-model="form.region" placeholder="请选择支付渠道" style="width: 150px">
                <el-option label="支付宝支付" value="alipay"></el-option>
                <el-option label="微信支付" value="wechat"></el-option>
                <el-option label="线下打款" value="handPay"></el-option>
              </el-select>
            </div>
            <div class="ml-10">
              <el-input v-model="input" placeholder="请输入手机号"></el-input>
            </div>
            <div class="ml-10">
              <el-input v-model="input2" placeholder="请输入退款编号"></el-input>
            </div>
            <div class="ml-10">
              <el-select v-model="channel.region" placeholder="退款类型" style="width: 150px">
                <el-option label="原渠道返回" value="0"></el-option>
                <el-option label="线下退款" value="1"></el-option>
              </el-select>
            </div>
            <div class="ml-10">
              <el-select v-model="state.region" placeholder="退款状态" style="width: 150px">
                <el-option label="待处理" value="1"></el-option>
                <el-option label="退款成功" value="5"></el-option>
                <el-option label="退款异常" value="9"></el-option>
                <el-option label="退款已关闭" value="13"></el-option>
              </el-select>
            </div>
            <div class="ml-10">
              <el-button @click="empty()">清空</el-button>
              <el-button type="primary" @click="gotoScreening()">筛选</el-button>
            </div>
            <div class="ml-10">
              <div class="drawerMore">
                <img src="@/assets/img/icon-filter.png" alt="" />
                <span>更多</span>
              </div>
            </div>
          </div>
        </div>
        <div class="float-left">
          <el-table :data="tableData" border style="width: 100%" v-loading="loading" :border="false">
            <el-table-column fixed prop="id" label="ID" width="100"> </el-table-column>
            <el-table-column prop="name" label="学员" width="350">
              <template slot-scope="scope">
                <img :src="tableData[scope.$index].user.avatar" alt="" style="
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    margin-right: 8px;
                    float: left;
                  " />
                <div style="float: left; line-height: 40px">
                  {{ tableData[scope.$index].user.nick_name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="refund_no" label="退款单号" width="350"> </el-table-column>
            <el-table-column prop="" label="退款类型" width="120">线下退款 </el-table-column>
            <el-table-column prop="city" label="支付渠道" width="120">
              <template slot-scope="scope">
                <div class="item-img" v-if="tableData[scope.$index].payment == 'handPay'">
                  <img src="@/assets/img/card.png" alt="" />
                </div>
                <div class="item-img" v-else-if="tableData[scope.$index].payment == 'wechat'">
                  <img src="@/assets/img/wepay.png" alt="" />
                </div>
                <div class="item-img" v-else-if="tableData[scope.$index].payment == 'alipay'">
                  <img src="@/assets/img/ali-pay.png" alt="" />
                </div>
                <div class="item-img" v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="退款金额" width="80">
              <template slot-scope="scope"> ¥ {{ tableData[scope.$index].amount / 100 }} </template>
            </el-table-column>
            <el-table-column prop="zip" label="状态" width="200">
              <template slot-scope="scope">
                <div style="color: #04c877" v-if="tableData[scope.$index].status == '5'">· 退款成功</div>
                <div style="color: #ff4d4f" v-else-if="tableData[scope.$index].status == '13'">· 退款已关闭</div>
                <div style="color: #e1a500" v-else-if="tableData[scope.$index].status == '1'">· 退款已处理</div>
                <div style="color: black" v-else>· --</div>
                <div>{{ new Date(tableData[scope.$index].created_at).toLocaleString() }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="times" label="时间" width="200">
              <template slot-scope="scope">
                <div>{{ new Date(tableData[scope.$index].created_at).toLocaleString() }}</div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" style="color: red; font-size: 14px;"
                  @click="open(tableData[scope.$index].id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block" style="text-align: center">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
            layout="total, sizes, prev, pager, next, jumper" :total="offSize.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getRefund, remoRefund } from "@/network/order";

import { MessageBox, Message } from "element-ui";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      form: {
        region: "",
      },
      input: "",
      input2: "",
      channel: { region: "" },
      state: { region: "" },
      tableData: [],
      params: {
        is_local: -1,
        status: 0,
        page: 1,
        size: 10,
      },
      offSize:[],
      loading: true,
      screening: {
        is_local: -1,
        payment: "",
        status: 0,
        mobile: "",
        refund_no: "",
        page: 1,
        size: 10,
      },
      currentPage: 1,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    refund() {
      getRefund(this.params).then((res) => {
        this.tableData = res.data.data.data;
        this.loading = false;
        this.offSize = res.data.data
        console.log(this.offSize);
      });
    },
    gotoNixt() {
      this.$router.go(-1);
    },
    gotoScreening() {
      this.loading = true;
      this.screening.payment = this.form.region;
      this.screening.mobile = this.input;
      this.screening.refund_no = this.input2;
      this.screening.is_local = this.channel.region ? this.channel.region : -1;
      this.screening.status = this.state.region;
      getRefund(this.screening).then((res) => {
        this.tableData = res.data.data.data;
        this.loading = false;
      });
    },
    empty() {
      this.input = "";
      this.input2 = "";
      this.channel.region = "";
      this.state.region = "";
      this.form.region = "";
      this.loading = true;
      this.refund();
    },
    handleSizeChange(pageSize) { 
      this.loading = true;
      this.params.size = pageSize;
      this.refund();
    },
    handleCurrentChange(page) { 
      this.loading = true;
      this.params.page= page;
      this.refund();
    },
    open(id) {
      MessageBox.confirm("确认操作?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          remoRefund(id);
          this.refund();
          Message({
            type: "cuccess",
            message: "删除成功",
          });
        })
        .catch(() => { });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.refund();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.page-main-body-box {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 5px 20px 20px;
  overflow-y: auto;
  background-color: #f1f2f9;

  .meedu-main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;

    .back-bar-box {
      display: flex;
      align-items: center;

      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;

        .el-icon-back {
          font-family: element-icons !important;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }
      }

      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin-right: 15px;
        margin-left: 15px;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }

    .d-flex {
      display: flex;
      align-items: center;
    }
  }
}

.float-left {
  display: flex;
}

.mb-30 {
  margin-bottom: 30px;
}

.j-b-flex {
  align-items: center;
  justify-content: space-between;
}

.ml-10 {
  margin-left: 10px;
}

.drawerMore {
  display: flex;
  align-items: center;
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 14px;
  cursor: pointer;

  img {
    width: 14px;
    height: 14px;
    margin-right: 5px;
  }
}

.item-img {
  img {
    width: 30px;
    height: 30px;
  }
}

::v-deep.el-table thead tr th {
  background-color: #f1f2f9;
  color: black;
  height: 59px;
}
</style>
